<template>
  <!-- 智慧工地 -->
  <view id="site-box">
    <view class="site-head">
      <view>
        <image src="/static/s3.png" mode="widthFix" />
      </view>
    </view>
    <view class="site-lists">
      <view class="poptitle" @click="selectPro">
        <text class="t1">选择项目：</text>
        <text class="t2">{{projectData.project_name}}</text>
        <i class="icon iconjiantou iconfont"></i>
      </view>
      <view class="ninebox">
        <view class="item" v-for="(e,i) in menu" :key="i" @click="navigate(e,i)">
          <i :class="['iconfont', e.icon]" :style="{color:color[i]}"></i>
          <text>{{e.name}}</text>
        </view>
      </view>
    </view>
    <!-- 项目列表(已改为单独的页面)-->
    <!-- <view :class="['projectList-box', {active: showPro}]" v-if="showPro"> -->
    <!-- <view class="boxshad" @click="showPro = false"></view> -->
    <!-- <view class="proList"> -->
    <!-- <div class="probox"> -->
    <!-- <h4>请选择智慧工地项目列表：</h4> -->
    <!-- <ul> -->
    <!-- <li v-for="(e,i) in projectlist" :key="i" @click="selpro(i)">{{e.project_name}}</li> -->
    <!-- </ul> -->
    <!-- </div> -->
    <!-- </view> -->
    <!-- </view> -->
  </view>
</template>
<script>
export default {
  data() {
    return {
      // showPro: false,
      token: wx.getStorageSync("userInfo").token,
      proList: "",
      projectData: {},
      color: [
        "#ea3881",
        "#3d91e9",
        "#9171d0",
        "#54aed0",
        "#2fb3c5",
        "#e5666c",
        "#f8ad46",
        "#d77a69",
        "#2aafbb"
      ],
      menu: [
        { name: "实名制管理", path: "./tab", icon: "iconshimingzhi" },
        { name: "扬尘环境管理", path: "./tab", icon: "iconyangchen" },
        { name: "视频监控", path: "", icon: "iconshipinjiankong" },
        { name: "塔吊监控", path: "", icon: "icontadiaocopy" },
        { name: "升降机监控", path: "", icon: "iconshengjiangji" },
        { name: "安全帽", path: "", icon: "iconanquanmao" },
        { name: "深基坑", path: "", icon: "iconshenjikengjiance" },
        { name: "BMI", path: "", icon: "iconBMI" },
        { name: "更多", path: "", icon: "icongengduo1" }
      ]
    };
  },
   mounted() {
     //判断是否登陆和是否有数据
    if (!this.token) {
      this.$routerTo({url : "../../pages/login/index"});
    }else if (!this.projectData.project_name) {
      this.$routerTo({url : "./ProjectList"});
    }; 
  },
  onShow(){
    this.projectData = wx.getStorageSync('projectData');
  },
  methods: {
    navigate(e,index) {
      // 菜单跳转
      // 传参 拼接字符串
      let url = e.path + "?projectid=" + this.projectData.project_id + "&appid=" + this.projectData.app_id + "&apptoken=" + this.projectData.token + "&tab=" + index;
      this.$routerTo({url,data : e})
    },
    selectPro() {
      this.$routerTo({url : "./ProjectList"});
    }
  }
};
</script>
<style lang="scss">
#site-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  .site-head {
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 35%;
      background: #e0e4ee;
    }
    position: relative;
    padding: 0.5rem 30rpx 0;
    view {
      border-radius: 0.4rem;
      overflow: hidden;
      position: relative;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .imgs {
    display: flex;
    margin-top: 0.8rem;
    padding: 0 30rpx;
    image {
      width: 100%;
      height: 100%;
      &:first-child {
        padding-right: 0.3rem;
      }
      &:last-child {
        padding-left: 0.3rem;
      }
    }
  }
  .site-lists {
    padding: 1rem 30rpx 0rem 1rem;
    flex: 1;
    background: #fff;
    border-top-left-radius: 0.6rem;
    border-top-right-radius: 0.6rem;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
    margin-top: 0.9rem;
    .poptitle {
      display: flex;
      align-items: center;
      color: #5a5a5a;
      font-size: 0.7rem;
      position: relative;
      padding: 0.5rem 0rem 0.8rem;
      .t2 {
        font-weight: 700;
        margin-left: 0rem;
        text-align: left;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      i {
        margin-right: 0;
        margin-left: 0.3rem;
        color: #6799d6;
      }
    }
    .ninebox {
      display: flex;
      flex-wrap: wrap;
      margin-top: 0.6rem;
      .item {
        padding: 1rem 0;
        width: 33.3333%;
        border-right: 1px solid #e5e5e5;
        border-top: 1px solid #e5e5e5;
        &:nth-child(1),
        &:nth-child(2),
        &:nth-child(3) {
          border-top: 0;
        }
        &:nth-child(3),
        &:nth-child(6),
        &:nth-child(9) {
          border-right: 0;
        }
        i {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 3rem;
          font-size: 2.5rem;
          &:nth-child(7) {
            padding-left: 1rem;
          }
        }
        text {
          display: block;
          text-align: center;
          padding-top: 3px;
        }
      }
    }
  }
  .projectList-box {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    &.active {
      .boxshad {
        opacity: 1;
      }
      .proList {
        display: block;
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }
    .boxshad {
      opacity: 0;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.3);
      transition: opacity 0.3s;
    }
    .proList {
      box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.05);
      height: 100%;
      position: fixed;
      z-index: 2;
      opacity: 0;
      transition: transform 0.3s, opacity 0.3s;
      transform: translate3d(100%, 0, 0);
      background: 0 0;
      right: 0;
      .probox {
        width: 78vw;
        background: #fff;
        height: 100%;
        padding: 1rem;
        overflow-x: hidden;
        overflow-y: auto;
      }
    }
  }
}
</style>